<template>
  <div class="home">
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="item in adCats" :key="item._id">
        <a :href="item.url">
          <img class="w-100" :src="item.image" alt />
        </a>
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right px-3" slot="pagination"></div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-dark-1">
      <swiper class="swiper" :options="swiperOption2" v-if="showSprite">
        <swiper-slide class="nav-item2 mb-3 ai-center" v-for="(n,i) in sprites" :key="i">
          <div class="sprite" :class="n.img"></div>
          <div class>{{n.name}}</div>
        </swiper-slide>
      </swiper>
      <div class="d-flex flex-wrap" v-else>
        <div class="nav-item mb-3 ai-center" v-for="(n,i) in sprites" :key="i">
          <div class="sprite p-2" :class="n.img"></div>
          <div class="py-2">{{n.name}}</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm">
        <i
          class="sprite sprite-arrow icon-down"
          :class="{'up':showSprite}"
          @click="showSprite=!showSprite"
        ></i>
      </div>
    </div>
    <!-- end of nav icons -->

    <m-list-card icon="xinwen" title="新闻资讯" :categories="newCats">
      <template #items="{category}">
        <router-link
          tag="div"
          :to="`/articles/${news._id}`"
          class="fs-md d-flex my-3"
          v-for="(news,i) in category.newsList"
          :key="i"
        >
          <span class="text-info">[{{news.categoryName}}]</span>
          <span class="px-1">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{news.title}}</span>
          <span class="text-grey-1 fs-xxs">{{news.createdAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>

    <m-list-card icon="yingxiong" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap">
          <router-link
            tag="div"
            :to="`/heroes/${hero._id}`"
            class="p-2 text-center"
            style="width:20%"
            v-for="(hero,i) in category.heroList"
            :key="i"
          >
            <img :src="hero.avatar" class="w-100" alt />
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  name: 'Home',
  filters: {
    date(val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data() {
    return {
      swiperOption: {
        pagination: {
          el: '.pagination-home'
        }
      },
      swiperOption2: {
        slidesPerView: 4,
        pagination: {
          el: '.pagination-home'
        }
      },
      newCats: [],
      heroCats: [],
      adCats: [],
      sprites: [
        { img: 'sprite-blz', name: '爆料站' },
        { img: 'sprite-gsz', name: '故事站' },
        { img: 'sprite-zbsc', name: '周边商城' },
        { img: 'sprite-tyf', name: '体验服' },
        { img: 'sprite-xrzq', name: '新人专区' },
        { img: 'sprite-rycc', name: '荣耀 传承' },
        { img: 'sprite-mnz', name: '模拟战资料库' },
        { img: 'sprite-wzyd', name: '王者营地' },
        { img: 'sprite-gzh', name: '公众号' },
        { img: 'sprite-bbjs', name: '版本介绍' },
        { img: 'sprite-djhj', name: '对局环境' },
        { img: 'sprite-wxwzt', name: '无限王者团' },
        { img: 'sprite-cyhdy', name: '创意互动营' }
      ],
      showSprite: true // 控制菜单收起展开
    }
  },

  methods: {
    async fetchNewsCats() {
      const res = await this.$http.get('news/list')
      this.newCats = res.data
    },
    async fetchHeroCats() {
      const res = await this.$http.get('heroes/list')
      this.heroCats = res.data
    },
    async fetchAdCats() {
      const res = await this.$http.get('ads/list')
      this.adCats = res.data.items
    }
  },
  created() {
    this.fetchNewsCats()
    this.fetchHeroCats()
    this.fetchAdCats()
  }
}
</script>

<style lang="scss">
@import '../assets/scss/variables';
.pagination-home {
  .swiper-pagination-bullet {
    opacity: 1;
    border-radius: 0.1538rem;
    background: map-get($colors, 'white');
    &.swiper-pagination-bullet-active {
      background-color: map-get($colors, 'info');
    }
  }
}
.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    border-right: 1px solid $border-color;
    &:nth-child(4n) {
      border-right: none;
    }
    .sprite {
      height: 1.9231rem;
    }
  }
  .nav-item2 {
    width: 25%;
    border-right: 1px solid $border-color;
    .sprite {
      height: 1.9231rem;
    }
  }
  .icon-down {
    transition: all 0.5s;
    &.up {
      transform: rotate(180deg);
    }
  }
}
</style>
